<template>
  <div class="header-mo">
    <div style="height: 3rem"></div>
    <div class="header-frame">
      <div class="icon-frame">
        <div class="icon-panel ac-bg" @click="moreModel = true">
          <img class="icon" src="@/assets/imgs/more.png" />
        </div>
        <div class="icon-panel ac-bg" @click="searchModel.show = true">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#search"></use>
          </svg>
        </div>
      </div>
      <div class="logo-frame">
        <div class="logo-panel ac-bg" @click="clickLogo">
          <img src="@/assets/imgs/logo-missyeah.png" />
        </div>
      </div>
      <div class="icon-frame">
        <div class="icon-panel ac-bg" @click="clickColl">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#love"></use>
          </svg>
        </div>
        <div class="icon-panel ac-bg" @click="clickCart">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#cart"></use>
          </svg>
        </div>
      </div>
    </div>
    <!--more弹窗-->
    <van-popup
      v-model="moreModel"
      position="left"
      style="height: 100%; width: 80%"
    >
      <div class="more-frame">
        <div class="userinfo-frame" @click="clickUser">
          <van-icon name="contact" class="co-icon ac" size="1.4rem" />
          <span v-if="!isLogin" class="label ac theme-color">
            Please sign in!
          </span>
          <span v-else class="label ac theme-color">{{
            userInfo.nick_name
          }}</span>
        </div>
        <div class="nav-frame">
          <div
            class="nav-panel"
            v-for="(menuitem, menuindex) in menuList"
            :key="'menu' + menuindex"
            @click="clickNav(menuindex, 'menu')"
          >
            <div class="icon-frame">
              <img class="icon" v-if="menuitem.icon" :src="menuitem.icon" />
              <div class="icon-defa" v-else></div>
            </div>
            <span class="label ac">{{ menuitem.title }}</span>
          </div>
          <div class="nav-panel" @click="clickBlog">
            <span class="label ac">Blog</span>
          </div>
          <div
            v-for="(item1, fooIndex) in footerList"
            :key="'foot' + fooIndex"
            class="nav-panel"
            @click="clickNav(fooIndex, 'foot')"
          >
            <span class="label ac">{{ item1.title }}</span>
          </div>
          <div class="nav-panel" style="border: 0 !important">
            <span class="label ac">SUBSCRIBE</span>
          </div>
          <div class="nav-panel nav-style">
            <span class="label ac">Missyeah only needs $1</span>
          </div>
          <div class="nav-panel nav-style">
            <span class="label ac"
              >Subscribe to our newsletter and don't miss out on $1 deals!</span
            >
          </div>
          <div class="nav-panel nav-style">
            <input
              class="nav-input"
              v-model="email"
              placeholder="enter your email address"
            />
          </div>
          <div
            class="nav-panel nav-style"
            style="height: 1rem"
            @click="clickSubscribe"
          >
            <span class="label ac">subscribe</span>
          </div>
        </div>
      </div>
    </van-popup>
    <!--导航弹窗-->
    <van-popup
      v-model="navModel.show"
      position="right"
      style="height: 100%; width: 80%"
    >
      <div class="nav-frame">
        <div class="title-frame">
          <div class="title-panel">
            {{ navModel.title }}
          </div>
          <div class="icon-panel ac-bg co-icon">
            <van-icon
              name="cross"
              class="title-close"
              @click="navModel.show = false"
            />
          </div>
        </div>
        <div
          class="nav-panel"
          v-for="(item, index) in navModel.list"
          :key="'navModel' + index"
          @click="clickNavSec(index)"
        >
          <div class="icon-frame" v-if="item.icon">
            <img class="icon" :src="item.icon" />
          </div>
          <span class="label ac">{{ item.title }}</span>
        </div>
      </div>
    </van-popup>
    <!--搜索弹窗-->
    <van-popup
      v-model="searchModel.show"
      position="top"
      style="height: 100%; width: 100%"
    >
      <div class="search-frame">
        <div class="title-frame">
          <div class="icon-panel ac-bg co-icon">
            <van-icon
              name="cross"
              class="title-close"
              @click="
                searchModel.show = false;
                searchModel.inputText = '';
              "
            />
          </div>
          <input
            class="title-panel"
            v-model="searchModel.inputText"
            placeholder="Search for products"
          />
          <div class="icon-panel ac-bg co-icon">
            <van-icon name="search" class="title-close" @click="clickSearch" />
          </div>
        </div>
      </div>
    </van-popup>
    <!--购物袋弹窗-->
    <van-popup
      v-model="bagModel.show"
      position="right"
      style="height: 100%; width: 80%"
    >
      <div class="bag-frame">
        <div class="title-frame">
          <div class="title-panel">Shopping bag</div>
          <div class="icon-panel ac-bg co-icon">
            <van-icon
              name="cross"
              class="title-close"
              @click="bagModel.show = false"
            />
          </div>
        </div>
        <div class="bag-panel">
          <div
            class="product-frame"
            v-for="(item, index) in cartList"
            :key="'bag' + index"
          >
            <div class="product-img" @click="clickPro(item)">
              <van-image class="img" fit="cover" lazy-load :src="item.pic" />
            </div>
            <div class="product-main">
              <p class="product-title" @click="clickPro(item)">
                {{ item.title }}
              </p>
              <p class="product-type" @click="clickPro(item)">
                <span v-if="item.status">{{ item.attribute_me }}</span>
                <span v-else style="color: red"
                  >Please reselect the product</span
                >
              </p>

              <div class="product-info" @click="clickNumber(index)">
                <p class="product-price" @click="clickPro(item)">
                  ${{ item.price }}
                </p>
                <div class="info-fast">
                  <van-stepper
                    :value="item.number"
                    async-change
                    @change="changeNumber"
                    button-size="1rem"
                  />
                  <span class="ac co-light" @click="deletePro(index)"
                    >Remove</span
                  >
                </div>
              </div>
            </div>
          </div>
          <Loading v-if="bagModel.loading" />
          <Nodata v-if="cartList.length == 0 && !bagModel.loading" />
        </div>
        <div class="footer-frame">
          <div class="footer-panel ac-bg">
            <span @click="clickCheckOut">Check out</span>
          </div>
          <nuxt-link to="/user/cart" class="tobag ac co-light"
            ><span @click="bagModel.show = false"
              >Go to shopping cart</span
            ></nuxt-link
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import HeaderMo from "./HeaderMo";
import footer from "../Footer/Footer.js";
export default {
  mixins: [HeaderMo.mixin, footer.mixin],
};
</script>
<style lang="less" scoped>
@import "./HeaderMo.less";
</style>